<template>
  <div class="clubDetail">
    <div class="clubDetail-content">
      <div class="clubDetail-content-item">
        <div class="clubDetail-content-item-title">
          <h3>社团名称：</h3>
        </div>
        <div class="clubDetail-content-item-value">
          <p>{{detailData.clubName}}</p>
        </div>
      </div>
      <div class="clubDetail-content-item">
        <div class="clubDetail-content-item-title" style="align-self: flex-start;">
          <h3>社团描述：</h3>
        </div>
        <div class="clubDetail-content-item-value">
          <p>{{detailData.clubDesc}}</p>
        </div>
      </div>
      <div class="clubDetail-content-item">
        <div class="clubDetail-content-item-title">
          <h3>创建者：</h3>
        </div>
        <div class="clubDetail-content-item-value">
          <div class="clubDetail-content-item-value-author">
            <div>
              <van-image round width="100%" height="100%" :src="detailData.author.userImgUrl"/>
            </div>
            <span>{{detailData.author.userName}}</span>
          </div>
          
        </div>
      </div>
      <div class="clubDetail-content-item">
        <div class="clubDetail-content-item-title">
          <h3>成员：</h3>
        </div>
        <div class="clubDetail-content-item-value" style="max-height: 100px;border-left: 2px solid #FFD260;">
          <div class="clubDetail-content-item-value-author" v-for="(item,index) in detailData.clubMemberInfo" :key="index">
            <div>
              <van-image round width="100%" height="100%" :src="item.userImgUrl"/>
            </div>
            <span>{{item.userName}}</span>
          </div>
        </div>
      </div>
      <div class="clubDetail-content-item">
        <div class="clubDetail-content-item-title">
          <h3>创建时间：</h3>
        </div>
        <div class="clubDetail-content-item-value">
          <p>{{detailData.date}}</p>
        </div>
      </div>
    </div>
    <div class="clubDetail-join">
      <van-button type="primary" :color="isJoin ? 'gray' : 'orange'" style="width:100px" @click="joinClub(detailData._id)">{{isJoin ? '已加入' : '加入'}}</van-button>
    </div>
  </div>
</template>
<script>
import {Button,Image as VanImage, Toast} from "vant"
import { addMember,checkLogin } from "@/service/user.js";
export default {
  props:['detailData'],
  components:{
    [Button.name]:Button,
    [VanImage.name]:VanImage
  },
  mounted(){
    checkLogin().then(res=>{
      this.isJoin = this.detailData.clubMember.filter(item=>item == res.userInfo._id).length != 0
    })
  },
  data(){
    return {
      isJoin:false
    }
  },
  methods:{
    joinClub(id){
      addMember(id).then(res=>{
        res.status == 200 ? Toast.success(res.message) : Toast.fail('加入失败');
        this.$emit('handleJoinSuccess',this.detailData._id)
      })
    }
  },
  watch:{
    detailData(){
      checkLogin().then(res=>{
        this.isJoin = this.detailData.clubMember.filter(item=>item == res.userInfo._id).length != 0
      })
    }
  }
}
</script>
<style lang="less">
.clubDetail{
  margin-top: 50px;
  .clubDetail-content{
    .clubDetail-content-item{
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 0 20px;
      >div{
        text-align: left;
        padding-left: 8px;
        margin: 8px 0;
        &:nth-child(1){
          width: 104px;
          border-left: 3px solid orange;
        }
        &:nth-child(2){
          flex: 1;
          max-height: 70px;
          word-break: break-all;
          overflow-y: auto;
          .clubDetail-content-item-value-author{
            display: flex;
            align-items: center;
            background: linear-gradient(89deg, #00000040, transparent);
            border-radius: 20px;
            margin: 4px 0;
            &:nth-child(1){
              margin: 0;
            }
            >div{
              width: 40px;
              height: 40px;
              margin-right: 8px;
            }
          }
        }
      }
      h3,p{
        padding: 0;
        margin: 0;
      }
    }
  }
  .clubDetail-join{
    padding: 12px 0;
  }
}
</style>